<script setup>
import {
  Form,
  Field,
  CellGroup,
  Popover,
  Icon,
  RadioGroup,
  Radio,
  Picker,
  Popup,
  showToast,
  DatePicker,
  showLoadingToast,
} from 'vant'
import { ref, computed, watchEffect } from 'vue'
import {
  forwarderAgentNameValidator,
  logisticsCopNameValidator,
  logisticsBillNoValidator,
  declVoucherNoValidator,
  trimObject,
} from '@/utils/validator.js'
import UploadFile from '@/components/uploadFile/index.vue'
import commonModel from '@/http/modules/common.js'
import { arrayToTime } from '@/utils/time.js'
import cgToast from '@/components/toast/index.js'
import { useRoute, useRouter } from 'vue-router'
import { enumStore } from '@/store/enum'
import { storeToRefs } from 'pinia'
import Utility from '@/utils/utility'
const enum_store = enumStore()
const { enumDslInfo } = storeToRefs(enum_store)
defineExpose({ checkForm, sketchForm })
const route = useRoute()
const router = useRouter()
const nowDateArr = Utility.getDateTime().split('-')
const shipDate = ref(nowDateArr) // 选中的日期
const estimatedShipDate = ref(nowDateArr) // 选中的日期
const declTime = ref(nowDateArr) // 选中的日期
const RefBGDForm = ref()
const RefDefaultForm = ref()
const isSketch = ref(false)
const editShipStatus = ref('')
const props = defineProps({
  fullParams: {
    type: Object,
    default: () => {},
  },
  contractDetail: {
    type: Object,
    default: () => {},
  },
  isBGD: {
    // 是否是报关单
    type: Boolean,
    default: false,
  },
  contractId: {
    type: [String, Number],
    default: '',
  },
  editContractId: {
    // 编辑id
    type: [String, Number],
    default: '',
  },
  status: {
    type: String,
    default: '',
  },
})
// 报关单
const bgdForm = ref({
  declVoucherNo: '', // 报关单号
  declTime: '', // 申报日期
  dealType: '', // 成交方式
  dealTypeDesc: '',
  declVoucherUrls: '', // 报关单文件
})
// 非报关单
const defaultForm = ref({
  whetherShip: 'Y', // 是否发货 Y N
  shipMode: '', // 发货模式（自主发货/货代发货）
  shipModeDesc: '',
  ffCopName: '', // 货代名称
  shipTime: '', // 实际发货日期
  logisticsCopName: '', // 物流公司名称
  logisticsType: '', // 实际物流方式
  logisticsTypeDesc: '',
  outLogisticsBillNo: '', // 出境物流单号
  dealType: '', // 成交方式
  dealTypeDesc: '',
  shopVoucherNo: '', // 发货凭证
  buyerType: '00', // 买家类型 00新买家 01老买家
  gmtEstShipTime: '', // 预计发货日期
  askOrderUrls: '', // 询盘下单沟通记录
  shipLogisticsUrls: '', // 货运安排沟通记录
  customsVoucherUrls: '', // 与该买家最近一 笔交易的报关单或出境物流凭证
})
const shipModeList = ref([])
const logisticsTypeList = ref([])
const dealTypeList = ref([])
let showShipModePicker = ref(false)
let showDeclTimePicker = ref(false)
let showShipTimePicker = ref(false)
let showLogisticsTypePicker = ref(false)
let showDealTypePicker = ref(false)
let showEstimatedShipTimePicker = ref(false)
const RefBGDFile = ref() // 报关单文件
const RefXPFile = ref() // 询盘下单沟通记录
const RefFHPZFile = ref() // 发货凭证
const RefHYFile = ref() // 货运安排沟通记录
const RefJYFile = ref() // 买家最近一笔交易
const onlyLogistics = computed(() => !!route.query.step)
const canEditWhenNoShip = computed(
  () => onlyLogistics.value && editShipStatus.value === 'N'
)
watchEffect(() => {
  if (enumDslInfo.value.ShipMode && enumDslInfo.value.ShipMode.length) {
    shipModeList.value = enumDslInfo.value.ShipMode.map((v) => ({
      ...v,
      text: v.label,
    }))
  }
  if (
    enumDslInfo.value.LogisticsType &&
    enumDslInfo.value.LogisticsType.length
  ) {
    logisticsTypeList.value = enumDslInfo.value.LogisticsType.map((v) => ({
      ...v,
      text: v.label,
    }))
  }
  if (enumDslInfo.value.DealType && enumDslInfo.value.DealType.length) {
    dealTypeList.value = enumDslInfo.value.DealType.map((v) => ({
      ...v,
      text: v.label,
    }))
  }
})
// 发货模式选择
function onShipModeConfirm({ selectedOptions }) {
  showShipModePicker.value = false
  const { value, text } = selectedOptions[0]
  defaultForm.value.shipMode = value
  defaultForm.value.shipModeDesc = text
}
function onLogisticsTypeConfirm({ selectedOptions }) {
  showLogisticsTypePicker.value = false
  const { value, text } = selectedOptions[0]
  defaultForm.value.logisticsType = value
  defaultForm.value.logisticsTypeDesc = text
}
function onDealTypeConfirm({ selectedOptions }) {
  showDealTypePicker.value = false
  const { value, text } = selectedOptions[0]
  if (props.isBGD) {
    bgdForm.value.dealType = value
    bgdForm.value.dealTypeDesc = text
  } else {
    defaultForm.value.dealType = value
    defaultForm.value.dealTypeDesc = text
  }
}
function handleShipDateConfirm({ selectedValues }) {
  showShipTimePicker.value = false
  defaultForm.value.shipTime = arrayToTime(selectedValues, '-')
}
function handleDeclTimeConfirm({ selectedValues }) {
  showDeclTimePicker.value = false
  bgdForm.value.declTime = arrayToTime(selectedValues, '-')
}
function handleEstimatedShipTimeConfirm({ selectedValues }) {
  showEstimatedShipTimePicker.value = false
  defaultForm.value.gmtEstShipTime = arrayToTime(selectedValues, '-')
}
function checkForm() {
  isSketch.value = false
  if (props.isBGD) {
    RefBGDForm.value.submit()
  } else {
    RefDefaultForm.value.submit()
  }
}
function sketchForm() {
  isSketch.value = true
  if (props.isBGD) {
    handleSubmit()
  } else {
    handleDefaultFormSubmit()
  }
}
async function handleDefaultFormSubmit() {
  let loading = null
  try {
    const {
      whetherShip,
      shipMode,
      ffCopName,
      shipTime,
      logisticsCopName,
      logisticsType,
      outLogisticsBillNo,
      dealType,
      shopVoucherNo,
      buyerType,
      gmtEstShipTime,
      askOrderUrls,
      shipLogisticsUrls,
      customsVoucherUrls,
    } = trimObject(defaultForm.value)
    const xpfFileList = RefXPFile?.value?.fileList || []
    const fhpzFileList = RefFHPZFile?.value?.fileList || []
    const hyFileList = RefHYFile?.value?.fileList || []
    const jyFileList = RefJYFile?.value?.fileList || []
    if (!isSketch.value) {
      // 文件上传校验
      // 非报关单-已发货
      if (whetherShip === 'Y' && fhpzFileList.length === 0) {
        showToast('请上传发货凭证')
        return false
      }
      // 非报关单-未发货-新买家
      if (whetherShip !== 'Y' && buyerType === '00') {
        if (xpfFileList.length === 0) {
          showToast('请上传询盘下单沟通记录')
          return false
        }
        if (hyFileList.length === 0) {
          showToast('请上传货运安排沟通记录')
          return false
        }
      }
      // 非报关单-未发货-老买家
      if (!whetherShip && buyerType === '01' && jyFileList.length === 0) {
        showToast('请上传与该买家最近一笔交易的报关单或出境物流凭证 录')
        return false
      }
    }
    loading = showLoadingToast({
      message: '请求中...',
      forbidClick: true,
    })
    let params = {
      whetherShip,
      shipMode,
      ffCopName,
      shipTime,
      logisticsCopName,
      logisticsType,
      outLogisticsBillNo,
      dealType,
      shopVoucherNo,
      buyerType,
      gmtEstShipTime,
      askOrderUrls,
      shipLogisticsUrls,
      customsVoucherUrls,
    }
    params.shopVoucherNo = fhpzFileList ? fhpzFileList.join(',') : ''
    params.askOrderUrls = xpfFileList ? xpfFileList.join(',') : ''
    params.shipLogisticsUrls = hyFileList ? hyFileList.join(',') : ''
    params.customsVoucherUrls = jyFileList ? jyFileList.join(',') : ''
    params.contractOrderNo = onlyLogistics.value
      ? props.editContractId
      : props.contractId
    if (whetherShip === 'Y') {
      params.buyerType = ''
      params.gmtEstShipTime = ''
    } else {
      params.shipMode = ''
      params.shipTime = ''
      params.logisticsCopName = ''
      params.outLogisticsBillNo = ''
      params.logisticsType = ''
      params.ffCopName = ''
    }
    params = onlyLogistics.value
      ? {
          shipInfo: params,
          contractOrderNo: onlyLogistics.value
            ? props.editContractId
            : props.contractId,
        }
      : { ...params, submit: isSketch.value ? false : true }
    console.log(params, 'params')
    if ([undefined, 'Draft'].includes(props.contractDetail.contractStatus)) {
    commonModel
      .gatewayApi({
        bizContent: {
          ...params,
          source: sessionStorage.source || '',
        },
        service: onlyLogistics.value
          ? 'cb_trade_edit_contract_ship'
          : 'cb_trade_temp_store_ship',
        version: '1.0.0',
        noToastErrorMsg:true,
      })
      .then((result) => {
        if (result) {
          if (isSketch.value) {
            doResultPage(true)
          } else {
            cgToast.open({
              title: '提交成功',
              showCancel: false,
              confirmFun: () => {
                cgToast.close()
                router.push(`/contract/detail/${props.contractId}`)
              },
              closeFun: () => {
                cgToast.close()
                router.push(`/contract/detail/${props.contractId}`)
              },
            })
            // emits('checkSuccess')
          }
        }
      })
      .catch((error) => {
        if (isSketch.value) {
          doResultPage(false, error)
          // 暂存失败处理
        } else {
          doResultPage(false, error, '提交失败')
        }
      })
    } else {
      // console.log(params, props.fullParams, 'fullParams')
      const { contractInfo, goodsInfo } = props.fullParams
      // const { goodsUrl, goodsCategory, goodsList } = goodsInfo
      commonModel
        .gatewayApi({
          bizContent: onlyLogistics.value
            ? {
                ...params,
                source: sessionStorage.source || '',
              }
            : {
              contractOrderNo:contractInfo.contractOrderNo,
                shipInfo: params,
                contractInfo,
                goodsUrl:goodsInfo.goodsUrl,
                goodsCategory:goodsInfo.goodsCategory,
                goodsList:goodsInfo.goodsList,
                source: sessionStorage.source || '',
              },
          service: onlyLogistics.value
            ? 'cb_trade_edit_contract_ship'
            : 'cb_contract_modify_full',
          version: '1.0.0',
          noToastErrorMsg:true,
        })
        .then((result) => {
          if (result) {
            cgToast.open({
              title: '提交成功',
              showCancel: false,
              confirmFun: () => {
                cgToast.close()
                if(onlyLogistics.value){
                  router.push(`/contract/detail/${result.contractOrderNo}`)
                }else{
                  router.push(`/contract/detail/${contractInfo.contractOrderNo}`)
                }
              },
              closeFun: () => {
                cgToast.close()
                if(onlyLogistics.value){
                  router.push(`/contract/detail/${result.contractOrderNo}`)
                }else{
                  router.push(`/contract/detail/${contractInfo.contractOrderNo}`)
                }
              },
            })
          }
        })
        .catch((error) => {
          doResultPage(false, error, '提交失败')
        })
    }
  } catch (e) {
    console.log(e)
  } finally {
    loading && loading.close()
  }
}
const declVoucherUrls = ref('')
const declVoucherUrlsName = ref('')
const askOrderUrls = ref('')
const enquiryOrderUrlsName = ref('')
const shipLogisticsUrls = ref('')
const shipLogisticsUrlsName = ref('')
const customsVoucherUrls = ref('')
const customsVoucherUrlsName = ref('')
const shopVoucherNo = ref('')
const shopVoucherNoName = ref('')

watchEffect(() => {
  if (props.editContractId) {
    if (props.contractDetail && JSON.stringify(props.contractDetail) !== '{}') {
      // 报关单详情回填
      if (props.contractDetail.contractInfo.declType === 'Y') {
        bgdForm.value = Object.assign({}, props.contractDetail.shipInfo)
        bgdForm.value.dealTypeDesc = Utility.getTargetByValue(
          enumDslInfo.value.DealType,
          props.contractDetail.shipInfo.dealType
        ).name
        declVoucherUrls.value = props.contractDetail.shipInfo.declVoucherUrls
      } else {
        // 非报关单回填
        defaultForm.value = Object.assign({}, props.contractDetail.shipInfo)
        defaultForm.value.shipModeDesc = Utility.getTargetByValue(
          enumDslInfo.value.ShipMode,
          props.contractDetail.shipInfo.shipMode
        ).name
        defaultForm.value.logisticsTypeDesc = Utility.getTargetByValue(
          enumDslInfo.value.LogisticsType,
          props.contractDetail.shipInfo.logisticsType
        ).name
        defaultForm.value.dealTypeDesc = Utility.getTargetByValue(
          enumDslInfo.value.DealType,
          props.contractDetail.shipInfo.dealType
        ).name
        shopVoucherNo.value = props.contractDetail.shipInfo.shopVoucherNo
        askOrderUrls.value = props.contractDetail.shipInfo.askOrderUrls
        shipLogisticsUrls.value =
          props.contractDetail.shipInfo.shipLogisticsUrls
        customsVoucherUrls.value = props.contractDetail.shipInfo.customsVoucherUrls
        editShipStatus.value = props.contractDetail.shipInfo.whetherShip
      }
    }
  }
})
async function handleSubmit() {
  let loading = null
  try {
    const bgdFileList = RefBGDFile.value.fileList || []
    if (!isSketch.value) {
      if (bgdFileList.length === 0) {
        showToast('请上传报关单文件')
        return false
      }
    }
    loading = showLoadingToast({
      duration: 0,
      message: '请求中...',
      forbidClick: true,
    })
    const { declVoucherNo, declTime, dealType } = trimObject(bgdForm.value)
    let params = { declVoucherNo, declTime, dealType }
    params.declVoucherUrls = bgdFileList.join(',')
    params.whetherShip = 'Y'
    params.contractOrderNo = props.contractId
    params = onlyLogistics.value
      ? params
      : { ...params, submit: isSketch.value ? false : true }
    // 走编辑物流接口
    if ([undefined, 'Draft'].includes(props.contractDetail.contractStatus)) {
    commonModel
      .gatewayApi({
        bizContent: {
          ...params,
          source: sessionStorage.source || '',
        },
        service: onlyLogistics.value
          ? 'cb_trade_edit_contract_ship'
          : 'cb_trade_temp_store_ship',
        version: '1.0.0',
      })
      .then((result) => {
        if (result) {
          if (isSketch.value) {
            doResultPage(true)
          } else {
            cgToast.open({
              title: '提交成功',
              showCancel: false,
              confirmFun: () => {
                cgToast.close()
                router.push(`/contract/detail/${props.contractId}`)
              },
              closeFun: () => {
                cgToast.close()
                router.push(`/contract/detail/${props.contractId}`)
              },
            })
          }
        }
      })
      .catch((error) => {
        if (isSketch.value) {
          doResultPage(false, error)
          // 暂存失败处理
        }
      })
    } else {
      // console.log(params, props.fullParams, 'fullParams222')
      const { contractInfo, goodsInfo } = props.fullParams
      const { goodsUrl, goodsCategory, goodsList } = goodsInfo
      commonModel
        .gatewayApi({
          bizContent: onlyLogistics.value
            ? {
                ...params,
                source: sessionStorage.source || '',
              }
            : {
                contractOrderNo: contractInfo.contractOrderNo,
                shipInfo: params,
                contractInfo,
                goodsUrl,
                goodsCategory,
                goodsList,
                source: sessionStorage.source || '',
              },
          service: onlyLogistics.value
            ? 'cb_trade_edit_contract_ship'
            : 'cb_contract_modify_full',
          version: '1.0.0',
          noToastErrorMsg:true,
        })
        .then((result) => {
          if (result) {
            cgToast.open({
              title: '提交成功',
              showCancel: false,
              confirmFun: () => {
                cgToast.close()
                if(onlyLogistics.value){
                  router.push(`/contract/detail/${result.contractOrderNo}`)
                }else{
                  router.push(`/contract/detail/${contractInfo.contractOrderNo}`)
                }
              },
              closeFun: () => {
                cgToast.close()
                if(onlyLogistics.value){
                  router.push(`/contract/detail/${result.contractOrderNo}`)
                }else{
                  router.push(`/contract/detail/${contractInfo.contractOrderNo}`)
                }
              },
            })
          }
        })
        .catch((error) => {
          doResultPage(false, error, '提交失败')
        })
      
    }
  } catch (e) {
    console.log(e)
  } finally {
    loading && loading.close()
  }
}
function doResultPage(status, data, title = '暂存失败') {
  if (status) {
    cgToast.open({
      title: '暂存成功',
      showCancel: false,
      confirmFun: () => {
        cgToast.close()
      },
    })
  } else {
    cgToast.open({
      title,
      content: data.subMsg || data.msg,
      type: 'warning',
      showCancel: false,
      confirmFun: () => {
        cgToast.close()
      },
    })
  }
}
</script>

<template>
  <div class="contract__logistics">
    <div class="logistics__card">
      <div class="logistics__card-header">物流信息</div>
      <Form
        v-if="isBGD"
        label-width="7em"
        ref="RefBGDForm"
        @submit="handleSubmit"
      >
        <CellGroup>
          <Field
            v-model="bgdForm.declVoucherNo"
            name="declVoucherNo"
            label="报关单号"
            placeholder="请输入报关单号"
            :rules="[
              { required: true, message: '请输入报关单号' },
              {
                validator: declVoucherNoValidator,
                message: '不可超过32个字符',
              },
            ]"
          />
          <Field
            v-model="bgdForm.declTime"
            name="declTime"
            label="申报日期"
            placeholder="请选择"
            readonly
            is-link
            :rules="[{ required: true, message: '请选择申报日期' }]"
            @click="showDeclTimePicker = true"
          />
          <Popup v-model:show="showDeclTimePicker" position="bottom">
            <DatePicker
              v-model="declTime"
              title="选择申报日期"
              @cancel="showDeclTimePicker = false"
              @confirm="handleDeclTimeConfirm"
            />
          </Popup>
          <Field
            v-model="bgdForm.dealTypeDesc"
            name="dealTypeDesc"
            label="成交方式"
            placeholder="请选择"
            readonly
            is-link
            :rules="[{ required: true, message: '请选择成交方式' }]"
            @click="showDealTypePicker = true"
          />
          <upload-file
            ref="RefBGDFile"
            title="报关单文件"
            :is-upload-file="declVoucherUrls"
            :is-upload-file-name="declVoucherUrlsName"
          />
        </CellGroup>
      </Form>
      <Form
        v-else
        label-width="7em"
        ref="RefDefaultForm"
        @submit="handleDefaultFormSubmit"
      >
        <Field
          v-model="defaultForm.whetherShip"
          name="whetherShip"
          label="是否发货"
        >
          <template v-slot:input>
            <RadioGroup
              v-model="defaultForm.whetherShip"
              direction="horizontal"
              :disabled="onlyLogistics && editShipStatus === 'Y'"
            >
              <Radio name="Y">是</Radio>
              <Radio name="N">否</Radio>
            </RadioGroup>
          </template>
        </Field>
        <!--   已发货     -->
        <template v-if="defaultForm.whetherShip === 'Y'">
          <Field
            v-model="defaultForm.shipModeDesc"
            name=""
            label="发货模式"
            placeholder="请选择"
            readonly
            is-link
            :rules="[{ required: true, message: '请选择发货模式' }]"
            @click="showShipModePicker = true"
          />
          <Popup v-model:show="showShipModePicker" position="bottom">
            <Picker
              :columns="shipModeList"
              @confirm="onShipModeConfirm"
              @cancel="showShipModePicker = false"
            />
          </Popup>
          <Field
            v-model="defaultForm.ffCopName"
            v-if="defaultForm.shipMode === '01'"
            name="ffCopName"
            label="货代名称"
            placeholder="请输入货代名称"
            :rules="[
              { required: true, message: '请输入货代名称' },
              {
                validator: forwarderAgentNameValidator,
                message: '不能超过64个字符',
              },
            ]"
          />
          <Field
            v-model="defaultForm.shipTime"
            name="shipTime"
            label="实际发货日期"
            placeholder="请选择"
            readonly
            is-link
            :rules="[{ required: true, message: '请选择实际发货日期' }]"
            @click="showShipTimePicker = true"
          />
          <Popup v-model:show="showShipTimePicker" position="bottom">
            <DatePicker
              v-model="shipDate"
              title="选择实际发货日期"
              @cancel="showShipTimePicker = false"
              @confirm="handleShipDateConfirm"
            />
          </Popup>
          <Field
            v-model="defaultForm.logisticsCopName"
            name="logisticsCopName"
            label="物流公司名称"
            placeholder="请输入物流公司名称"
            :rules="[
              { required: true, message: '请输入物流公司名称' },
              {
                validator: logisticsCopNameValidator,
                message: '不能超过64个字符',
              },
            ]"
          />
          <Field
            v-model="defaultForm.logisticsTypeDesc"
            name="logisticsType"
            label="实际物流方式"
            placeholder="请选择"
            readonly
            is-link
            :rules="[{ required: true, message: '请选择实际物流方式' }]"
            @click="showLogisticsTypePicker = true"
          />
          <Popup v-model:show="showLogisticsTypePicker" position="bottom">
            <Picker
              :columns="logisticsTypeList"
              @confirm="onLogisticsTypeConfirm"
              @cancel="showLogisticsTypePicker = false"
            />
          </Popup>
          <Field
            v-model="defaultForm.outLogisticsBillNo"
            name="outLogisticsBillNo"
            label="出境物流单号"
            placeholder="请输入出境物流单号"
            :rules="[
              { required: true, message: '请输入出境物流单号' },
              {
                validator: logisticsBillNoValidator,
                message: '不能超过512个字符',
              },
            ]"
          />
          <div class="item__tips van-cell tips">
            注:多个出境物流单号用英文逗号间隔
          </div>
          <Field
            v-model="defaultForm.dealTypeDesc"
            name="dealTypeDesc"
            label="成交方式"
            placeholder="请选择"
            readonly
            is-link
            :rules="[{ required: true, message: '请选择成交方式' }]"
            @click="showDealTypePicker = true"
          />
          <upload-file
            ref="RefFHPZFile"
            :is-upload-file="shopVoucherNo"
            :is-upload-file-name="shopVoucherNoName"
            :delete="!(onlyLogistics && editShipStatus === 'Y')"
          >
            <template v-slot:title>
              <Popover class="tips__popover" placement="right">
                <div class="tips__box-popover">
                  <p>海运提单、快递面单、空运提单等有效发货凭证</p>
                </div>
                <template #reference>
                  发货凭证<Icon name="warning" color="#ccc"></Icon>
                </template>
              </Popover>
            </template>
          </upload-file>
        </template>
        <!--   未发货     -->
        <template v-else>
          <Field
            v-model="defaultForm.buyerType"
            name="buyerType"
            label="新/老买家"
            :rules="[{ required: true, message: '请选择新/老买家' }]"
          >
            <template v-slot:input>
              <RadioGroup
                v-model="defaultForm.buyerType"
                direction="horizontal"
                class="logistics__status-radio"
                :disabled="canEditWhenNoShip"
              >
                <Radio name="00">新买家</Radio>
                <Radio name="01">老买家</Radio>
              </RadioGroup>
            </template>
          </Field>
          <Field
            v-model="defaultForm.gmtEstShipTime"
            name="gmtEstShipTime"
            label="预计发货时间"
            placeholder="请选择"
            readonly
            is-link
            :rules="[{ required: true, message: '请选择预计发货时间' }]"
            @click="showEstimatedShipTimePicker = true"
          />
          <Popup v-model:show="showEstimatedShipTimePicker" position="bottom">
            <DatePicker
              v-model="estimatedShipDate"
              title="选择预计发货时间"
              @cancel="showEstimatedShipTimePicker = false"
              @confirm="handleEstimatedShipTimeConfirm"
            />
          </Popup>
          <div class="item__tips van-cell">
            请按PI或邮件中预计发货时间正确填写，以免延长审核时间，
            并于到期后及时补充物流单据
          </div>
          <Field
            v-model="defaultForm.dealTypeDesc"
            name="dealTypeDesc"
            label="成交方式"
            placeholder="请选择"
            readonly
            is-link
            :rules="[{ required: true, message: '请选择成交方式' }]"
            @click="showDealTypePicker = true"
          />
          <!--   未发货-新买家     -->
          <template v-if="defaultForm.buyerType === '00'">
            <upload-file
              ref="RefXPFile"
              title="询盘下单沟通记录"
              :is-upload-file="askOrderUrls"
              :is-upload-file-name="enquiryOrderUrlsName"
              :delete="!canEditWhenNoShip"
              :hidden-uplod="canEditWhenNoShip"
            />
            <div class="line" />
            <upload-file
              ref="RefHYFile"
              title="货运安排沟通记录"
              :is-upload-file="shipLogisticsUrls"
              :is-upload-file-name="shipLogisticsUrlsName"
              :delete="!canEditWhenNoShip"
              :hidden-uplod="canEditWhenNoShip"
            />
          </template>
          <!--   未发货-老买家     -->
          <upload-file
            v-else
            ref="RefJYFile"
            title="与该买家最近一笔交易的报关单或出境物流凭证"
            :is-upload-file="customsVoucherUrls"
            :is-upload-file-name="customsVoucherUrlsName"
            :delete="!canEditWhenNoShip"
            :hidden-uplod="canEditWhenNoShip"
          />
        </template>
      </Form>
      <Popup v-model:show="showDealTypePicker" position="bottom">
        <Picker
          :columns="dealTypeList"
          @confirm="onDealTypeConfirm"
          @cancel="showDealTypePicker = false"
        />
      </Popup>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.contract__logistics {
  padding: 12px;

  .logistics__card {
    width: 100%;
    padding: 0 12px;
    background: #ffffff;
    border-radius: 8px;

    .logistics__card-header {
      height: 40px;
      line-height: 40px;
      font-size: 16px;
      font-weight: 500;
      color: #222222;
    }

    .line {
      width: 100%;
      height: 1px;
      background: #eeeeee;
    }

    .item__tips {
      height: 48px;
      padding: 8px 0;
      font-size: 12px;
      color: #999999;
      line-height: 16px;

      &.tips {
        height: 35px;
      }
    }
  }
}

:deep {
  .upload__file-tile i {
    margin-left: 2px;
  }

  .van-radio--horizontal:nth-of-type(1) {
    margin-right: 67px;
  }

  .logistics__status-radio .van-radio--horizontal:nth-of-type(1) {
    margin-right: 39px;
  }
}
</style>
